Por Milko A. García Torres

Símbolos e instancias de botones:

Para crear un símbolo tenemos dos opciones dentro de Insertar(Insert): Nuevo botón (New Button), y Nuevo símbolo(New Symbol). La primera de estas opciones está diferenciada por su uso fecuente, ya que Fireworks le da la opción de armar botoneras de modo fácil y práctico (como ahora veremos). La segunda es para crear otros símbolos, ya sean gráficos, o animaciones simples por medio de varios frames, del mismo modo en que vimos se hacen los gifts animados.

Vamos a empezar entonces por crear un botón. Así que elegimos Nuevo botón (New Button), y nos aparece esta ventana. Fíjese que tiene cinco solapas superiores, correspondientes a cinco instancias que iremos viendo de a una. En la primera de ellas (Up), debemos construir el botón tal cual se verá por defecto en nuestra página.

Pasamos a la segunda solapa (Over). En ella determinaremos cómo se verá el botón cuando el mouse pase sobre él. Para ello, primeramente presionamos el botón Copy Up graphic. Con esto estaremos copiando exactamente lo mismo que hay en la solapa Up, y en la misma ubicación. Una vez copiado, modificamos el botón con el efecto que queramos se vea en Over. En este caso le hemos dado un color más claro para dar la sensación de que se ilumina, pero los efectos pueden ser muchísimos: de color, tamaño, forma, etc.

Pasamos a la tercera solapa (Down). En ella determinaremos cómo se verá el botón cuando hagamos click sobre él y quedemos en la página a la que nos lleva. El procedimiento es igual al anterior: primero copiamos lo mismo que hay en Over con el botón Copy Over Graphic, y luego modificamos o no el botón, según nuestra preferencia. Y aquí sería necesario recordar lo siguiente: un elemento o una página web, no son mejores o más agradables a la vista porque estén plagadas de "efectos" o "adornos". La elección de determinado efecto depende siempre del contexto de diseño, la finalidad de la página, sus destinatarios, o el producto que presenta. Por eso, siempre habrá que tomar en centa que una de las opciones puede ser "no innovar": pocos efectos, o efectos sobrios.

Pasamos a la cuarta solapa (Over While Down). Aquí, el procedimiento es similar, pero con el botón Copy Down Graphic. En ella determinaremos cómo se verá un "rollover" sobre el botón cuando estemos en el link al cual nos condujo. Por ejemplo, supongamos que hacemos clic en el botón que dice "formulario" y nos conduce a una página llamada "formulario", pero la botonera (los botones de navegación) sigue siendo la misma. El botón puede aparecer ahora de alguna manera que le diga al usuario, visualmente, que está en "formulario". Ese modo visual puede ser que esté más claro, más obscuro, o cualquier otro efecto que haga resaltar ese botón del resto de los botones. Bien, esa instancia es precisamente el Over While Down.

Pasamos a la cuarta solapa (Active Area). En ella se nos muestra qué tan grande es el área activa que actuará como link para este botón. Además, tenemos el botón Link Wizard, que nos guiará paso a paso para darle las propiedades propias de un link a este botón. Aquí es conveniente aclarar lo siguiente: Nótese que el área activa es m,ás grande que el botón; pues bien, hay que achicarla sí o sí, pues corremos el riesgo que, al colocar juntos los botones, se superpongan sus respectivas áreas interactivas. Esto se hace clickeando sobre el área y achicándola desde sus nodos. MUCHO CUIDADO!! En este caso hicimos que una de las instancias del botón lo agrandara, por tanto, al achicar el área interactiva no deberemos hacerlo a los bordes que se ven (que son lo de su instancia más grande), sino a los bordes del tamaño natural del botón. Terminada la elaboración de todas las instancias, y para que el botón pueda ser visto como tal, sólo debemos cerrar la ventana del botón.

Así aparecerá el botón en el lienzo (Canvas), pero si le molesta que se vean las áreas interactivas, puede utilizar el botón para ocultarlas (marcado con círculo rojo) que aparece en la caja de herramientas.

Puede surgir entonces la siguiente pregunta: si tengo que hacer varios botones..........tengo que hacerlos uno por uno?. Afortunadamente no, con copiar y pegar el mismo botón, basta para empezar. Pero, tome en cuenta que el segundo botón tendrá exactamente las mismas propiedades que el primero, así que, para cambiarlas, haga doble clik sobre el segundo botón. Aparecerá esta ventana, que le pregunta acaso quiere cambiar las instancias sólo del botón seleccionado (Current), o de todos los que existen (All). Obviamente, en este caso, seleccionamos Current. Se nos volverá a abrir la ventana correspondiente al botón seleccionado, donde pordremos cambiar las características de este, sin modificar las del anterior.

En este caso queremos sólo cambiar el texto del segundo botón y ponerle "Botón 2". Esto se hace por los medios habituales. Veremos que al querer confirmar el texto en el nuevo botón, aparecerá la siguiente ventana: esta nos pregunta si queremos actualizar los cambios en TODAS las instancias de este botón o sólo en esta primera. Obviamente, en este caso respondemos YES.

Último paso: ajustar el lienzo a la botonera (Trim canvas), y exportarla como un HTML de Fireworks con los siguientes parámetros debidamente seteados (configurados):

Obviamente, al ser exportado como HTML de Fireworks, deberá ser insertado como tal dentro de la página, y no como una simple imagen. Esto se realiza mediante el botón correspondiente , por lo menos en Dreamweaver. La botonera aquí presente no tiene links, pero es un buen ejemplo de una simple.

Del mismo modo en que insertamos un botón, podemos insertar un gráfico, mediante Insertar (Insert)> Nuevo símbolo (New Symbol)> Gráfico (Graphic), y en ventana que aparece le ponemos un nombre al gráfico. Los gráficos son gráficos de cualquier tipo. ya sean dibujados por nosotros, ya sean importados de otro archivo, ya sean imágenes fotográficas. La ventaja es que estos quedan almacenados en la librería, a la que accedemos mediante Ventana (Window)> Librería (Library). Una vez en ella, si necesitamos un gráfico igual, bastará con arrastrarlo desde la librería hasta el lienzo, sin necesidad de crearlo nuevamente. Respecto a la opción que nos da Fireworks 4 para insertar (como un símbolo más) una animación, bastará decir que es lo mismo que crear un gift animado cualquiera, con la diferencia que, si lo creamos como animación, queda disponible para otras oportunidades dentro de la librería.

Creación de zonas interactivas y mapas de imagen:

"Al acceder a la página principal de la mayoría de sedes Web, lo más probable es que encuentre un mapa de imágenes. Un mapa de imagen es un gráfico o grupo de gráficos que aparece en una página Web y que dispone de áreas especiales
denominadas zonas interactivas. La ubicación y el tamaño de la zona interactiva se definen en el archivo HTML de la página Web. Al desplazar el cursor sobre una zona interactiva, éste adquiere la forma de una mano pequeña. Normalmente, al hacer clic en una zona interactiva se abre una página Web y para esto, se hace referencia a la dirección URL que se le ha asignado en el código HTML.
El proceso de creación de un mapa de imagen en Fireworks sigue estos tres pasos generales:
Creación del mapa de imagen en el documento PNG de Fireworks
Exportación del gráfico y de los archivos HTML
Ubicación del HTML del mapa de imagen en la posición adecuada de la sede
Web o en otro archivo HTML". (Manual Oficial de Macromedia)

Para crear un mapa de imagen es necesario, primeramente, elegir un gráfico de origen, que puede ser una serie de botones, ventanas, una lista de títulos o cualquier imagen desde la que se determinarán las zonas interactivas que compondrán el mapa de imagen.
El archivo PNG de Fireworks en el que se crea el mapa de imagen no es el mapa de imagen en sí. Para crear un mapa de imagen en un navegador Web, es preciso combinar el gráfico exportado y los archivos HTML.

Para crear las zonas interactivas tenemos la herramienta Zona interactiva en cualquiera de sus tres modalidades según la zona que deseemos sea cuadrangular, circular o poligonal. Posteriormente, la asignación de vínculos (valores URL) a esas zonas, se hará mediante la ventana correspondiente, que aparece al tener seleccionada la zona interactiva y de ahí a Ventana (Window)> Objeto (Object).

En esta ventana aparecen las opciones para: 1- Determinar la dirección URL. 2- Determinar el texto que aparecerá en el Alt con el mouse. 3- Determinar el modo en que se abrirá la ventana (self, blank, etc) 4- El color a utilizar en la máscara web. 5- La forma que le daremos a la máscara web.

Mapeo de imagen concluído: Por ejemplo, en la siguiente imagen, hemos "mapeado" los ojos y la boca, es decir, estas son zonas interactivas que nos remiten a un link determinado. Las zonas de los ojos han sido realizadas con la herramienta de zona interactiva circular, y la de la boca, con la poligonal.

Introducción de valores URL absolutos o relativos:

Los valores URL que se introducen en el inspector Objeto o en el panel URL pueden ser absolutos (externos) o relativos (internos): Si desea establecer un vínculo con una página Web que no pertenezca a su sitio Web, debe utilizar una dirección URL absoluta. Para establecer un vínculo con una página Web de su sitio Web, puede utilizar una dirección URL absoluta o relativa.
Los valores URL absolutos (externos) son direcciones URL completas que incluyen el protocolo de servidor, que suele ser http:// en el caso de páginas Web. Por ejemplo, http://www.macromedia.com/support/fireworks es la dirección URL absoluta de la página Web de asistencia técnica de Macromedia Fireworks. Aunque los valores URL absolutos son siempre direcciones exactas que no dependen de la ubicación del documento origen, los vínculos no se establecen correctamente si se traslada el documento de destino.
Los valores URL relativos (internos) están relacionados con la carpeta que contiene el documento origen. Los valores URL relativos suelen ser los más fáciles de utilizar para establecer un vínculo con archivos que van a permanecer en la misma carpeta que el documento actual.